<script setup lang="ts">
import {ref,watch} from 'vue'
import type{RouteLocationNormalized} from 'vue-router'
import { useRoute } from 'vue-router'

const route = useRoute()
const noCachePages=ref(new Set<string>([]))


// 非缓存页设置。需要注意的是：要使得非缓存生效，非缓存页组件需要写name属性，且name属性的值要与路由配置的name属性值一致
const setNoCachePage=(newRoute: RouteLocationNormalized)=>{
	if(newRoute.meta.noKeepAlive)
	noCachePages.value.add(newRoute.name as string)
  // console.log(noCachePages.value)
}

watch(
	route,
	(newRoute, _oldRoute) => {
		setNoCachePage(newRoute)
	},
	{ immediate: true }
)

</script>

<template>
	<div class="BlankLayout">
		<Suspense>
			      <template #default>
							<router-view v-slot="{ Component }">
						 <transition mode="out-in" name="page" appear>
								<KeepAlive :exclude="[...noCachePages]">
									 <component :is="Component" />
								</KeepAlive>
						</transition>
				 </router-view>
						</template>
						<template #fallback> 
              <div v-loading="true" class="loadingPage" element-loading-text="数据加载中..."></div>
						</template>
				 </Suspense>
	</div>
</template>

<style scoped>
.loadingPage{
	width: 300px;
	height: 300px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 999;
}
</style>
